<template>
    <div :class="['container',{'wap':isMobile}]">
        <div class="poster" ref="posterDiv" style="z-index:-99;" v-if="imgUrl">
            <img :src="imgUrl" alt="" class="bg">
            <img :src="imgTitle" alt="" class="tit">
            <!-- <img :src="imgTit1" alt="" class="mtit1" v-if="isMobile">
            <img :src="imgTit2" alt="" class="mtit2" v-if="isMobile"> -->
        </div>
       
        <div class="seasons" ref="targetDiv">
            <div class="imgbg" v-show="curtype.name=='四季'">
                <video id="videobg" ref="videobg" autoplay loop :src="`./${curseason.id}/${cur}.mp4`" muted
                    webkit-playsinline='true' playsinline='true' :poster="`./${curseason.id}/${cur}.jpg`"></video>
            </div>
            <div class="imgbg" v-show="curtype.name=='时辰'">
                <video id="videobg" ref="videobg" autoplay loop :src="`./Time.mp4`" muted
                    webkit-playsinline='true' playsinline='true' :poster="`./time.png`"></video>
            </div>
        </div>
        <div class="bottom_options" v-if="curtype.name=='四季'">
            <span :class="{'active':cur==1}" @click="getCur(1)"> 1</span>
            <span :class="{'active':cur==2}" @click="getCur(2)"> 2</span>
            <span :class="{'active':cur==3}" @click="getCur(3)"> 3</span>
            <span :class="{'active':cur==4}" @click="getCur(4)"> 4</span>
        </div>
        <img :src="imgLogo" alt="" class="logo" v-if="!isMobile">
        <img src="../../assets/back.png" class="back" @click="$router.replace('/')">
        <div class="actions">
            <div class="top-btns">
                <div :class="['item',{'active':curtype.name==item.name}]" v-for="(item,i) in list" :key="i"
                    @click="changeType(item)">{{ item.name }}</div>
            </div>
            <div class="left-btns">
                <div class="list" v-if="curtype.id==0">
                    <div :class="['item',{'active':item.season==curseason.name}]" v-for="(item,i) in seasons" :key="i"
                        @click="getCurseason(item)">{{ item.season }}</div>
                </div>
                <div class="list" v-else>
                    <div :class="['item',{'active':item.name==curtime.name}]" v-for="(item,i) in times" :key="i"
                        @click="getCurtime(item)">{{ item.name }}</div>
                </div>

            </div>
            <div class="bottom-btn" @click="getPoster">
                <img :src="imgPhoto" alt="">
            </div>
        </div>
        <div class="hint" v-if="isShowHint">
            <div class="step1" v-if="curstep==1">
                <img :src="mimgStep1" alt="" class="txt" v-if="isMobile">
                <img :src="imgStep1" alt="" class="txt" v-else>
                <img :src="imgNext" alt="" class="next" @click="curstep=2">
            </div>
            <div class="step2" v-if="curstep==2">
                <img :src="mimgStep2" alt="" class="txt" v-if="isMobile">
                <img :src="imgStep2" alt="" class="txt" v-else>
                <img :src="imgNext" alt="" class="next" @click="curstep=4">
            </div>
            <div class="step3" v-if="curstep==3" @click="curstep=4">
                <img :src="mimgStep3" alt="" class="txt" v-if="isMobile">
                <img :src="imgStep4" alt="" class="txt" v-else>
                <img :src="imgNext" alt="" class="next">
            </div>
            <div class="step4" v-if="curstep==4">
                <!-- <img :src="mimgStep4" alt="" class="txt" v-if="isMobile"> -->
                <img :src="imgStep3" alt="" class="txt">
                <img :src="imgNext" alt="" class="next" @click="isShowHint=false">
            </div>
        </div>
        <div class="pop_poster_shade" v-show="isPoster" @click.prevent>
           <div class="pop_poster">
            <div class="loading">拍照中</div>
            <div class="poster_con">
                <img :src="posterUrl" alt="" class="poster_img" @error="checkImg" @contextmenu.prevent="preventDefault">
            </div>

            <img :src="imgShare" alt="" class="share_ico" @click="SavePoster">
            <img :src="imgClose" alt="" class="close_ico" @click="close">
        </div> 
        </div>
        
    </div>
</template>
<script setup>
    import imgLogo from './images/logo.png'
    import imgTitle from './images/title.png'
    import imgTit1 from './images/mtit1.png'
    import imgTit2 from './images/mtit2.png'
    import imgPhoto from './images/photo_ico.png'
    import imgShare from './images/share.png'
    import imgClose from './images/close.png'
    import imgStep1 from './images/hint1.png'
    import imgStep2 from './images/hint2.png'
    import imgStep3 from './images/hint3.png'
    import imgStep4 from './images/hint4.png'
    import mimgStep1 from './images/mhint1.png'
    import mimgStep2 from './images/mhint2.png'
    import mimgStep3 from './images/mhint3.png'
    import mimgStep4 from './images/mhint4.png'
    import imgNext from './images/next_step.png'
    import {
        ref,
        reactive,
        inject,
        onMounted
    } from 'vue'
    const isMobile = inject('isMobile');
    import html2canvas from "html2canvas"
    const targetDiv = ref();
    const posterDiv = ref();
    const modelframe = ref();
    const isShowHint = ref(true);
    const cur = ref(1);
    const videobg = ref();
    const list = [{
            id: 0,
            name: '四季',
        },
        {
            id: 1,
            name: '时辰',
        },
    ]
    const curtype = reactive({
        id: 0,
        name: '四季',
    })
    const seasons = reactive(
        [{
                id: 1,
                season: '春',
                videos: [1, 2, 3, 4]
            },
            {
                id: 2,
                season: '夏',
                videos: [1, 2, 3, 4]
            },
            {
                id: 3,
                season: '秋',
                videos: [1, 2, 3, 4]
            },
            {
                id: 4,
                season: '冬',
                videos: [1, 2, 3, 4]
            }
        ]
    )
    const times = reactive([
        {
            id:1,
            name:'子',
            timestart:0,
        },
        {
            id:2,
            name:'丑',
            timestart:5,
        },
        {
            id:3,
            name:'寅',
            timestart:10,
        },
        {
            id:4,
            name:'卯',
            timestart:15,
        },
        {
            id:5,
            name:'辰',
            timestart:20,
        },
        {
            id:6,
            name:'巳',
            timestart:25,
        },
        {
            id:7,
            name:'午',
            timestart:30,
        },
        {
            id:8,
            name:'未',
            timestart:35,
        },
        {
            id:9,
            name:'申',
            timestart:40,
        },
        {
            id:10,
            name:'酉',
            timestart:45,
        },
        {
            id:11,
            name:'戌',
            timestart:50,
        },
        {
            id:12,
            name:'亥',
            timestart:0,
        },
    ])
    const curstep = ref(1);
    const curseason = reactive({
        id: 1,
        name: '春'

    })
    const curtime = reactive({
        id:1,
        name:'子'
    })
    const getCur = (num) => {
        cur.value = num;
        console.log(videobg.value)
        if (videobg.value)
            videobg.value.play();
    }
    const imgUrl = ref();
    const posterUrl = ref();
    const isPoster = ref(false);
    // const captureContent = ()=>{
    //     const _targetDiv = targetDiv.value;
    //     html2canvas(_targetDiv,{backgroundColor:'#fff'}).then((canvas)=>{
    //         const base64 = canvas.toDataURL('image/png')
    //         const myBlob = dataURLtoBlob(base64)
    //         const myUrl = URL.createObjectURL(myBlob)
    //         console.log(myUrl)
    //     })
    // }
    //切换四季时辰
    const changeType = (item) => {
        curtype.id = item.id;
        curtype.name = item.name;
    }
    //获取当前季节
    const getCurseason = (item) => {
        curseason.name = item.season;
        curseason.id = item.id;
        cur.value = 1;
    }
    const getCurtime= (item) => {
        curtime.name = item.name;
        curtime.id = item.id;
        cur.value = 1;
        
        videobg.value.currentTime= item.timestart
    }
    const updateTime =() =>{
        let time=videobg.value.currentTime;
        
        if(time>=0&&time<5){
           curtime.name =times[0].name
        }else if (time>=5&&time<10){
           curtime.name =times[1].name

        }else if (time>=10&&time<15){
            curtime.name =times[2].name
            
        }else if (time>=15&&time<20){
            curtime.name =times[3].name
            
        }else if (time>=20&&time<25){
            curtime.name =times[4].name
            
        }else if (time>=25&&time<30){
            curtime.name =times[5].name
            
        }else if (time>=30&&time<35){
            curtime.name =times[6].name
            
        }else if (time>=35&&time<40){
            curtime.name =times[7].name
            
        }else if (time>=40&&time<45){
            curtime.name =times[8].name
            
        }else if (time>=45&&time<50){
            curtime.name =times[9].name
            
        }
        else if (time>=50&&time<55){
            curtime.name =times[10].name
            
        }
        else if (time>=55&&time<60){
            curtime.name =times[11].name
            
        }
    }
    // const captureIframe = async() =>{
    //     try {

    //         const iframeDocument = modelframe.value.contentDocument || modelframe.value.contentWindow.document;
    //         console.log(modelframe.value)
    //         const canvas = await html2canvas(iframeDocument.body);
    //         const img = canvas.toDataURL('image/png');
    //         imgUrl.value = img ;
    //     }catch (error) {
    //         console.error('转换出错:', error)
    //     }

    // //   iframe.onload = function() {
    // //     try {
    // //       // 确保跨域策略不会阻止访问
    // //       var iframeCanvas = iframe.contentWindow.document.createElement('canvas');
    // //       iframeCanvas.width = iframe.offsetWidth;
    // //       iframeCanvas.height = iframe.offsetHeight;
    // //       iframeCanvas.getContext('2d').drawImage(iframe.contentWindow.document.body, 0, 0);

    // //       ctx.drawImage(iframeCanvas, 0, 0);
    // //       const img3 = canvas.toDataURL('image/png');
    // //       imgUrl.value = img;
    // //       console.log(img3)
    // //     } catch (e) {
    // //       console.error('跨域限制: 不能访问 iframe 内容');
    // //     }
    // //   };
    // }
    const captureElement = async () => {
        try {
            const canvas = await html2canvas(targetDiv.value);
            const img = canvas.toDataURL('image/png');
            imgUrl.value = img;
            console.log(img)
        } catch (error) {
            console.log(error)
        }
    };
    const captureElement2 = async () => {
        try {
            const canvas2 = await html2canvas(posterDiv.value);
            const img2 = canvas2.toDataURL('image/png');
            posterUrl.value = img2;
            isPoster.value = true;
        } catch (error) {
            console.log(error)
        }
    };
    const getPoster = async () => {
        await captureElement();
        // captureIframe();
        setTimeout(function () {
            captureElement2();

        }, 500)


    }
    const SavePoster = async () => {
        const blob = await fetch(posterUrl.value).then((res) => res.blob());
        const imageUrl = URL.createObjectURL(blob);

        const a = document.createElement('a');
        a.href = imageUrl;
        a.download = 'poster.png';
        a.click();
        URL.revokeObjectURL(a.href)
        isPoster.value = false;
    }
    const close = ()=>{
        isPoster.value = false;
        posterUrl.value = '';
    }
    // const copyImageToClipboard = async () => {
    //     try {
    //         const imageSrc = posterUrl.value; // 替换为您要复制的图片的实际URL
    //         const response = await fetch(imageSrc);
    //         const blob = await response.blob();
    //         await navigator.clipboard.write([
    //             new ClipboardItem({
    //                 [blob.type]: blob
    //             })
    //         ]);
    //         console.log('图片已复制到剪切板');
    //         isPoster.value = false;
    //     } catch (error) {
    //         console.error('复制失败:', error);
    //     }
    // };

    const getCookie = (name) => {
        const cookies = document.cookie.split('; ');
        for (let i = 0; i < cookies.length; i++) {
            const [cookieName, cookieValue] = cookies[i].split('=');
            if (name === cookieName) {
                return decodeURIComponent(cookieValue);
            }
        }
        return '';
    }
    const setCookie = (name, value, expires = '') => {
        document.cookie = `${name}=${encodeURIComponent(value)}${expires}`;
    }
    const preventDefault = (e)=>{
        e.preventDefault();
    }
    onMounted(() => {


        // 获取cookie
        // const user = getCookie('user');
        // const expires = '; expires=' + new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toUTCString();
        // if (user == 'nofirst') isShowHint.value = false;
        // setCookie('user', 'nofirst', expires);
        if (videobg.value) {
            videobg.value.play();
        }
        document.addEventListener("WeixinJSBridgeReady", function () {
            videobg.value.play();
        }, false);
    })
</script>
<style lang='scss' scoped>
    .container {
        position: relative;
        width: 100%;
        height: 100%;
        background:#fff;
        .back {
            position: absolute;
            left: 1vw;
            top: 5vw;
            cursor: pointer;
            z-index: 9999;
        }

        .model {
            width: 100%;
            height: 100%;
            overflow:hidden;
            iframe {
                width: 100%;
                height: 100%;
            }
        }

        .seasons {
            position: absolute;
            width: 100%;
            height: 100%;
            // background:url(./images/bg.png)center no-repeat;
            // background-size:cover;
            overflow: hidden;

            .imgbg {
                position: absolute;
                width: 100%;
                height: 100%;

                video {
                    width: 100%;
                    height: 100%;
                    height: auto;
                    object-fit: cover;
                }
            }

        }

        .bottom_options {
            position: absolute;
            bottom: 30px;
            left: 20px;

            span {
                display: inline-block;
                width: 40px;
                height: 40px;
                border-radius: 20px;
                color: #e7d09d;
                background: rgba(231, 208, 157, 50%);
                display: inline-flex;
                justify-content: center;
                align-items: center;
                font-size: 17px;
                margin: 0 8px;
                cursor: pointer;

                &.active {
                    background: #9d3127;
                }
            }
        }

        .poster {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;

            .bg {
                position: absolute;
                width: 100%;
                height: 100%;
            }

            .tit {
                position: absolute;
                width: 14.53vw;
                top: 2.86vw;
                left: 2.86vw;
            }
        }

        .logo {
            position: absolute;
            width: 12.76vw;
            top: 1.56vw;
            left: 1.875vw;
        }

        .top-btns {
            position: absolute;
            top: 1.56vw;
            right: 1.56vw;
            width: 130px;
            height: 38px;
            width: 6.77vw;
            height: 1.979vw;
            background: #9d3127;
            border-radius: 0.52vw;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none;

            .item {
                width: 3.125vw;
                height: 1.667vw;
                border-radius: 0.25vw;
                color: #e7d09d;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                pointer-events: auto;

                &.active {
                    color: #9d3127;
                    background: #e7d09d;
                }
            }
        }

        .left-btns {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            left: 1.56vw;
            top: 0;
            bottom: 0;
            margin: 0 auto;
           pointer-events: none;

            .list {
                width: 1.77vw;
                border-radius: 1vw;
                background: rgb(145 48 53/80%);
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                pointer-events: all;
                .item {
                    width: 1.354vw;
                    height: 2vw;
                    border-radius: 1vw;
                    color: #e7d09d;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0.5vw auto;
                    cursor: pointer;

                    &.active {
                        color: #9d3127;
                        background: #e7d09d;
                    }
                }
            }
        }

        .bottom-btn {
            position: absolute;
            bottom: 1.56vw;
            left: 0;
            right: 0;
            margin: auto;
            width: 2.6vw;
            cursor: pointer;

            img {
                width: 100%;
            }
        }

        .hint {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.3);

            .step1 {
                width: 13.54vw;
                position: absolute;
                left: 4.89vw;
                top: 24vh;

                .txt {
                    width: 100%;

                }

                .next {
                    position: absolute;
                    top: 6.5vw;
                    right: 0.5vw;
                    width: 2.6vw;
                    color: #E7D09D;
                    cursor: pointer;
                    font-family: "SourceHanSerifCN-Medium";
                }
            }

            .step2 {
                position: absolute;
                width: 10.41vw;
                right: 5.26vw;
                top: 3.9vw;

                .txt {
                    width: 100%;

                }

                .next {
                    position: absolute;
                    top: 6.197vw;
                    right: 0.5vw;
                    width: 2.6vw;
                    color: #E7D09D;
                    cursor: pointer;
                    font-family: "SourceHanSerifCN-Medium";
                }
            }

            .step3 {
                position: absolute;
                width: 13.54vw;
                left: 4.89vw;
                top: 17.68vh;

                .txt {
                    width: 100%;

                }

                .next {
                    position: absolute;
                    top: 6.197vw;
                    right: 0.5vw;
                    width: 2.6vw;
                    color: #E7D09D;
                    cursor: pointer;
                    font-family: "SourceHanSerifCN-Medium";
                }
            }

            .step4 {
                position: absolute;
                width: 11.458vw;
                left: 0;
                right: 0;
                bottom: 5.2vw;
                margin: auto;

                .txt {
                    width: 100%;

                }

                .next {
                    position: absolute;
                    top: 2.86vw;
                    right: 0.5vw;
                    width: 2.6vw;
                    color: #E7D09D;
                    cursor: pointer;
                    font-family: "SourceHanSerifCN-Medium";
                }
            }

        }
        .pop_poster_shade {
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            background:rgba(0,0,0,0.5);
        }
        .pop_poster {
            position: absolute;
            width: 60vw;
            // height:34.895vw;
            height: calc(100vh*0.6);
            background: #fff;
            border: 2px solid #E0C68D;
            left: 0;
            right: 0;
            bottom: 7.13vw;
            margin: 0 auto;
            font-size: 0;

            .loading {
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .poster_con {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .close_ico {
                position: absolute;
                top: 20px;
                right: 20px;
                cursor: pointer;
            }
            .share_ico {
                position: absolute;
                left:0;
                right:0;
                bottom:20px;
                margin:auto;
                cursor: pointer;
            }
        }

        &.m {
            .back {
                position: absolute;
                width: 10.667vw;
                left: 4vw;
                top: 16vw;
                cursor: pointer;
            }

            .top-btns {
                width: 10vw;
                height: 31.33vw;
                flex-direction: column;
                border-radius: 1.333vw;

                .item {
                    writing-mode: vertical-rl;
                    width: 8.533vw;
                    height: 14.667vw;
                    border-radius: 1vw;
                }
            }

            .left-btns {
                left: 0;
                right: 0;
                top: auto;
                bottom: 6.667vw;
                margin: 0 auto;
                width: 86.667vw;
                height: 8vw;
                border-radius: 4vw;
                background: rgba(145, 48, 53, 0.8);

                .list {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: none;
                    display: flex;
                    justify-content: center;
                    flex-direction: row;

                    .item {
                        width: 10.6667vw;
                        height: 6.667vw;
                        border-radius: 3.33vw;
                        font-family: "SourceHanSerifCN-Bold";
                        font-size: 4.8vw;
                    }
                }
            }

            .bottom-btn {
                width: 10.667vw;
                top: 4vw;
                left: 4vw;
                right: auto;
                bottom: auto;
            }

            .hint {
                .step1 {
                    bottom: 14.667vw;
                    left: 21.4667vw;
                    width: 54.667vw;
                    top: auto;

                    .next {
                        width: 12.2667vw;
                        top: 19.4667vw;
                        right: 1.8667vw;
                    }
                }

                .step2 {
                    width: 45.333vw;
                    top: 35.2vw;
                    right: 12.667vw;
                    font-size: 0;

                    .next {
                        width: 12.2667vw;
                        right: 1.8667vw;
                        top: auto;
                        bottom: 1.8667vw;
                    }
                }

                .step3 {
                    bottom: 14.667vw;
                    left: 21.4667vw;
                    width: 54.667vw;
                    top: auto;

                    .next {
                        width: 12.2667vw;
                        top: 19.4667vw;
                        right: 1.8667vw;
                    }
                }

                .step4 {
                    width: 53.333vw;
                    top: 15vw;
                    right: auto;
                    bottom: auto;
                    left: 7.0667vw;
                    font-size: 0;

                    .next {
                        width: 12.2667vw;
                        right: 1.8667vw;
                        top: auto;
                        bottom: 1.8667vw;
                    }
                }
            }

            .poster {
                .mtit1 {
                    position: absolute;
                    width: 29.6vw;
                    top: 4vw;
                    left: 4vw;
                }

                .mtit2 {
                    position: absolute;
                    width: 20.53vw;
                    top: 4vw;
                    right: 0.5vw;
                }
            }

            .pop_poster {
                top: 15vw;
                bottom: auto;

                .share_ico {
                    width: 8vw;
                    left: 0;
                    right: 0;
                    top: auto;
                    bottom: 10px;
                    margin: auto;
                }
            }

            .bottom_options {
                bottom: 20vw;

                span {
                    display: flex;
                    width: 30px;
                    height: 30px;
                    border-radius: 15px;
                    margin: 10px auto;
                }
            }

            .seasons {
                .imgbg {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    video {
                        height: 100%;
                        width: auto;
                    }
                }
            }
        }
        &.wap {
            .back {
                position: absolute;
                width: 7vh;
                left: 3vh;
                top: 2vh;
                cursor: pointer;
            }

            .top-btns {
                top:1vw;
                right:1vw;
                width:12vw;
                height:3.5vw;

                .item {
                    width:5.5vw;
                    height:3vw;
                    border-radius:0.5vw;
                }
            }

            .left-btns {
                left:3vh;

                .list {
                    width:7vh;
                    border-radius:1vh;

                    .item {
                       width:5vh;
                       height:5.5vh;
                       margin:0.5vh auto;
                       border-radius:1vh ;
                    }
                }
            }

            .bottom-btn {
                width:3.5vw;
            }

            .hint {
                .step1 {
                    
                    width:15vw;
                    left:5.5vw;
                    .next {
                        width:4.6vw;
                        top:5vw;
                    }
                }

                .step2 {
                    width:15vw;
                    top:4.9vw;
                    .next {
                       width:4.6vw;
                       top:7.5vw; 
                    }
                }

                .step3 {
                    

                    .next {
                       
                    }
                }

                .step4 {
                   
                    width:15vw;
                    bottom:6.2vw;
                    .next {
                        width:4.6vw;
                        top:3.5vw;
                    }
                }
            }

            .poster {
                .mtit1 {
                    
                }

                .mtit2 {
                    
                }
            }

            .pop_poster {
                

                .close_ico {
                    width:3vw;
                    top:1vw;
                    right:1vw;
                }
                .share_ico {
                    width:3vw;
                    left:0;
                    right:0;
                    bottom:1vw;
                    top:auto;
                    margin:auto;
                }
            }

            .bottom_options {
                bottom:1vw;
                left:1vw;

                span {
                    width:3vw;
                    height:3vw;
                    margin:0 0.5vw;
                    font-size:1vw;
                }
            }

            .seasons {
                .imgbg {
                   

                    video {
                        
                    }
                }
            }
        }
    }
</style>